<template>
	<view  class="index">
		<nav-bar title="百年辉煌" isBack></nav-bar>
		<!-- 建党100周年主题 -->
		<view class="top-banner">
			<image src="https://cos.ryz1620.com/liankun/static/ddimg.jpg" mode="widthFix"></image>
		</view>
		
		<!-- 我的点赞  -->
		<view class="module-row my-great">
			<view class="title">
				<view class="iconfont iconhuaban119"></view>
				<view class="text ellipsis" @click="toONEshop('/pages_now/pages/now/foundTheme/myGreat/index')">我的点赞</view>
				<view class="iconfont icon-more"></view>
			</view>
			<view class="day-list">
				<!-- 打卡状态item添加对应类：已打卡.done ; 超时未打卡.undone -->
				<view class="item" :class="{done:index<currindex}" v-for="(item,index) in Datas">
					<view class="box">
						<view class="tit ellipsis" v-if="index<currindex">已点</view>
						<view class="tit ellipsis" v-else>第{{index+1}}天</view>
						<view class="status">
							<view class="iconfont">
								<view class="iconfont icon-selected"></view>
							</view>
							<view class="con">
								+0.5
							</view>
						</view>
					</view>
				</view>
	
			</view>
			<view class="bar">
				<view class="item">
					<text @click="toONEshop('/pages_now/pages/now/foundTheme/rule/index')">点赞规则</text>
					<view class="iconfont icon-more"></view>
				</view>
				<!-- <view class="item">
					<text>点赞提醒</text>
					<switch checked @change="switchChange" color="#e6e6e6" style="transform:scale(0.7)"/>
				</view> -->
			</view>
		</view>
		<!-- 点赞倒计时  -->
		<view class="module-row time">
			<view class="timeout">
				<view class="tit">点赞倒计时</view>
				<countdown :startTime="starttime" :endTime="endtime" style="display: inline-block;" />
			</view>
			<view class="data-list">
				<view class="item">
					<view class="tit">参加人数</view>
					<view class="text ellipsis">{{homedata.join_num}}</view>
				</view>
				<view class="item">
					<view class="tit">累计点赞</view>
					<view class="text ellipsis">{{homedata.support_num}}</view>
				</view>
				<view class="item">
					<view class="tit">访问量</view>
					<view class="text ellipsis">{{homedata.visit_num}}</view>
				</view>
			</view>
		</view>
		<!-- 排行榜  -->
		<view class="module-row leader-board">
			<view class="i_tInput">
				<view class="i_tiIcon iconfont icon-search"></view>
				<input type="text" confirm-type="search" v-model="keyword" @confirm="searchData" placeholder="请输入选择编号或名称" placeholder-class="col-ccc" />
			</view>
			
			<view class="i_content">
				<view class="i_cLine"></view>
				<view class="i_cContain">
					<view class="i_cTabs">
						<view class="i_cTab" :class="{'active': sort === 1}" @tap="contentBannerToggle(1)">
							<view class="i_cTab-txt"><text>人气排行</text></view>
						</view>
						<view class="i_cTab" :class="{'active': sort === 2}" @tap="contentBannerToggle(2)">
							<view class="i_cTab-txt"><text>最新参赛</text></view>
						</view>
					</view>
					<view class="i_cSwiper">
						<view class="rank-list" style="padding: 10rpx;">
							<view class="item" v-for="(item,index) in opusList">
							   <view style="padding: 10rpx;">
									<view class="box" @click="toONEshop('/pages_now/pages/now/foundTheme/detail/index?id='+ item.id)">
										<view class="icon">{{index+1}}</view>
										<view class="pic" v-if="item.type == 0">
											<image :src="item.opus"></image>
										</view>
										<view class="pic" v-if="item.type == 1">
											<video style="width: 100%;height: 100%;" id="myVideo" :src="item.opus" controls></video>
										</view>
									</view>
									<view class="info" @click="toONEshop('/pages_now/pages/now/foundTheme/detail/index?id='+ item.id)">
										<view class="user">
											<view class="avatar"><image :src="item.headimg"></image></view>
											<view class="name ellipsis">{{item.name}}</view>
										</view>
										<view class="great">
											<view class="num ellipsis" ><text class="iconfont iconhuaban161"></text>{{item.support_num}}次</view>
										</view>
									</view>
								  <view class="btn-red btn" v-if="homedata.is_support==0" @click="getsupport(item.id)">点赞</view>
								  <view class="btn-red btn btn-reds" v-if="homedata.is_support==1">点赞</view>
							   </view>		
							</view>
							

                        </view>
					</view>
					
				</view>
			</view>
		

			
		</view>
		
		<view class="btnpaly" @click="toONEshop('/pages_now/pages/now/foundTheme/participate/index')">立即参赛</view>
		
		<u-popup v-model="showSign" mode="center" border-radius="20">
			<view class="sign-modal-box">
				<view class="modal-head u-flex-col u-col-center">
					<image class="modal-bg" src="https://cos.ryz1620.com/liankun/static/sign_modal_bg.jpg" mode=""></image>
					<image class="sign-tag" src="https://cos.ryz1620.com/liankun/static/sign_modal_succeed.png" mode=""></image>
					<view class="sign-num-box">
						已连续点赞
						<text class="sign-num">{{ support.num }}</text>
						天
					</view>
				</view>
				<view class="modal-content u-flex-col u-col-center">
					<view class="sign-success">点赞成功</view>
					<view class="sign-score">恭喜您获得{{ support.point || '0' }}元</view>
				</view>
				<view class="modal-bottom u-flex u-row-center"><button class="u-reset-button confirem-btn" @tap="showSign = false">确认</button></view>
			</view>
		</u-popup>
		
	</view>
</template>

<script>
	import countdown from "@/components/cz-countdowns/cz-countdown.vue"
	import navBar from "@/components/navBar/navBar.vue"
	import service_now from '@/service/now.js'
	import URL from '@/config/url.js'
	export default {
		components: { navBar,countdown},
		data() {
			return {
				contentIndex:0,
				homedata:'',
				starttime:'',
				endtime:'',
				page:1,
				pagesize:20,
				sort:1,
				keyword:'',
				opusList:[],
				support:'',
				showSign:false,
				Datas:10,
				currindex:2,
			};
		},
		onLoad(parms) {
			this.$utils.getUrl()
			this.githome()
			this.gitopusList()
			this.getdata()
		},
		filters: {
				formatDates(value) {
					  let date = new Date(parseInt(value) * 1000);
					  let y = date.getFullYear();
					  let m = date.getMonth() + 1;
					  m = m < 10 ? "0" + m : m;
					  let d = date.getDate();
					  d = d < 10 ? "0" + d : d;
					  let h = date.getHours();
					  h = h < 10 ? "0" + h : h;
					  let minute = date.getMinutes();
					  let second = date.getSeconds();
					  minute = minute < 10 ? "0" + minute : minute;
					  second = second < 10 ? "0" + second : second;
					  return y +"-" + m + "-" + d + " " + h + ":" + minute ;
				},
				formatDate(value) {
					var date = new Date(value);
					//date.setTime(value);
					var month = date.getMonth() + 1;
					var hours = date.getHours();
					if (hours < 10)
						hours = "0" + hours;
					var minutes = date.getMinutes();
					if (minutes < 10)
						minutes = "0" + minutes;
					var time = date.getFullYear() + "-" + month + "-" + date.getDate() +
						" " + hours + ":" + minutes;
					return time;
				}
		},
		methods: {
			// banner
			githome(){
				let that = this
				service_now.gethome({
				}).then(res => {
					if (res.code == 1) {
						that.homedata = res.data
						that.starttime= that.$options.filters.formatDate(new Date())
						that.endtime= that.$options.filters.formatDates(res.data.end_time)	
					}
				});
			},
			// list
			gitopusList(){
				let that = this
				service_now.getopusList({
					page:this.page,
					pagesize:this.pagesize,
					sort:this.sort,
					keyword:this.keyword,
				}).then(res => {
					if (res.code == 1) {
						for(let i =0;i<res.data.data.length;i++){
							that.opusList.push(res.data.data[i])
						}
						
					}
				});
			},
			// 点赞
			getsupport(id){
				let that = this
				service_now.getsupport({
					id:id
				}).then(res => {
					if (res.code == 1) {
						that.showSign = true;
						that.support = res.data
						that.githome();
						that.page=1
						that.opusList = []
						that.gitopusList()
						that.getdata()
					}
				});
			},
			// 点赞日期
			getdata(){
				let that = this
				service_now.gedate({
				}).then(res => {
					if (res.code == 1) {
				      this.currindex= res.data.cuntinue_days
					  if( this.currindex>10){
						  this.Datas= this.currindex + 1
					  }
					}
				});
			},
			searchData() {
				this.page=1
				this.opusList = []
				this.gitopusList()
			},
			contentBannerToggle(index) {
				this.sort = index
				this.page=1
				this.opusList = []
				this.gitopusList()
			},
			toONEshop(url){
				uni.navigateTo({
					url
				});
			},
		    switch1Change: function (e) {
		        console.log('switch发生change事件，携带值为', e.target.value)
		    }
		}
	}
</script>

<style lang="scss" scoped>
	// timeout样式穿透
	/deep/ .uni-countdown{
		
		.uni-countdown__number{
			width: auto;
		}
		.uni-countdown__splitor{
			color: #ee1a26 !important;
		}
		.uni-countdown__number,.uni-countdown__splitor{
			font-size: 35rpx;
		}
	}
	.ellipsis{
		overflow:hidden;
		white-space:nowrap;
		text-overflow:ellipsis;
	}
	.index{
		background-color:#e90111;
	}
	.top-banner {
	}
	.module-row{		margin:33.33rpx 20rpx 10rpx;
		padding: 33.33rpx;		border-radius:20rpx; 		background:#FFFFFF;
		box-shadow: 6.66rpx 6.66rpx 13.33rpx rgba(0, 0, 0, .4);
		margin-bottom: 90rpx;
	}
	.my-great{
		position: relative;
		.title{
			display: flex;
			background: #fff;
			position: absolute;
			top:-40rpx;
			left: 0;
			border-radius:20rpx 0 0 0; 
			padding: 10rpx 80rpx;
			
			.icon-more{
				position: relative;
				top: 7rpx;
			}
			.iconhuaban119{
				position: absolute;
				left:40rpx;
				top:16rpx;
			}
			&::after{
				 content:'';
				 position:absolute;
				 z-index: 1;
				 top: 0;
				 right: -39rpx;
				 bottom: 0;
				 width: 65rpx;
				 background: #fff;
				 transform: skew(40deg);
				 border-radius: 0 10rpx 0 0;
			}
			.text{
				font-size: 30rpx;
				font-weight: bold;
			}
		}
		.day-list{
			padding: 30rpx 0 60rpx 0;
			display: flex;
			.item{
				padding: 0 3.33rpx;
				.box{
					width: 62rpx;
					height: 96.66rpx;
					border-radius: 15rpx;
					background-image: linear-gradient(to bottom, #f4941b, #ea0411);
					text-align: center;
					box-shadow: 0 6.66rpx 0 rgba(166, 1, 18, 1);
					padding: 6.66rpx;
					font-size: 15rpx;
					.iconfont{ display: none;}
					.icon-selected{
						font-size: 45rpx;
						color: #fff;
					}
					.tit{
						color: #fff;
						margin-bottom: 13.33rpx;
					}
					.con{
						width: 43.33rpx;
						height: 43.33rpx;
						line-height: 43.33rpx;
						background: #fff;
						border-radius: 50%;
						color: #f31625;
						margin: 0 auto;
					}
				}
				&.done{
					.box{
						background-image: linear-gradient(to bottom, #f15323, #e80510);
					}
					.iconfont{ display: block;}
					.con{display: none;}
				}
				&.undone{
					.box{
						background-image: linear-gradient(to bottom, #b2b2b2, #535353);
						box-shadow: 0 6.66rpx 0 rgba(51, 51, 51, 1);
						.con{
							background: #b3b3b3;
							color: #4c4c4c;
						}
					}
				}
			}
		}
		.bar{
			display: flex;
			justify-content: space-between;
			color: #999;
			height: 33.33rpx;
			line-height: 33.33rpx;
			align-items: center;
			.item{
				position: relative;
				&:nth-child(1){
					padding-right: 30rpx;
					.iconfont{
						position: absolute;
						right: 0;
						top: 0;
					}
				}
				
			}
		}
	}
	.time{
		text-align: center;
		.timeout{
			display: flex;
			font-size: 38rpx;
			color: #ee1a26;
			font-weight: bold;
			background: #e6e6e6;
			border-radius: 33.33rpx;
			height: 63.33rpx;
			line-height: 63.33rpx;
			.tit{
				margin-right: 45rpx;
				margin-left: 30rpx;
			}
		}
		.data-list{
			margin-top:40rpx;
			display: flex;
			overflow: hidden;
			.item{
				flex: 1;
				.tit{
					font-weight: bold;
					margin-bottom: 13.33rpx;
				}
			}
		}
	}	
	.leader-board{
		padding-left: 0;
		padding-right: 0;
		.i_tInput { width: 496.66rpx; height: 60rpx;border-radius: 36rpx;background: #f2f2f2;position: relative;overflow: hidden; margin:0 auto;
			& > input {width: 100%;height: 100%;font-size: 24rpx;padding: 0 24rpx 0 72rpx;}
		}
		.i_tiIcon {width: 32rpx;height: 32rpx;line-height: 32rpx;color: #ccc;font-size: 32rpx;margin-top: -16rpx;position: absolute;top: 50%;left: 28rpx;}
		
		.i_cContain{
			margin:33.33rpx 0;
			.i_cTabs{
				font-size: 35rpx;
				border-top:0.66rpx solid #cccccc;
				border-bottom:0.66rpx solid #cccccc;
				padding: 20rpx 0;
				display: flex;
				text-align: center;
				.i_cTab{
					flex: 1;
					font-weight: bold;
					&.active{
						color: #fa0203;
					}
				}
			}
		}
		.rank-list{
			overflow: hidden;
			.item{
				width: 50%;
				float: left;
				overflow: hidden;
				.box{
					width: 100%;
					position: relative;
					.icon{
						position: absolute;
						top: 0;
						left: 40rpx;
						width: 35rpx;
						padding: 10rpx 0;
						text-align: center;
						background: #d0180e;
						border-radius: 0 0 20rpx 20rpx;
						color: #fff;
						font-size: 20rpx;
						z-index: 9;
					}
					.pic{
						height: 340rpx;
						overflow: hidden;
						background: #e6e6e6;
						border-radius: 13.33rpx;
						border:0.66rpx solid #d3d3d3;
						image{
							border-radius: 13.33rpx;
						}
					}
				}
				.info{
					margin: 20rpx 0;
					display: flex;
					.user {
						flex: 1;
						position: relative;
						padding-left: 56.66rpx;
						height: 46.66rpx;
						overflow: hidden;	
						.avatar {
							position: absolute;
							left: 0;
							top: 0;
							width: 46.66rpx;
							height: 46.66rpx;
							border-radius: 50%;
							background: #e6e6e6;
							border: 0.66rpx soid #d4d4d4;
							image {
								border-radius: 50%;
							}
						}
					}
					.great{
						position: relative;
						overflow: hidden;
						.iconfont{ 
							font-size: 32rpx; 
							color: #999;
							}
					}
				}
			}
		}
		.pages{
			display: flex;
			padding-bottom: 50rpx;
			.item{
				flex: 1;
				text-align: center;
				.btn{
					display: inline;
					padding: 0 40rpx;
					height: 40rpx;
					line-height: 40rpx;
					border: 0.66rpx solid #4d4d4d;
					color: #4d4d4d;
					font-size: 35rpx;
					border-radius: 30rpx;
				}
			}
		}
	}	
	.bottom-pic {
		overflow: hidden;
		position: relative;
		padding-bottom: 40%;
		image {
			width: 100%;
			height: 100%;
			position: absolute;
			left: 0;
			top: 0;
		}
	}
	.btn-red{
		width: 255rpx;
		height: 55rpx;
		line-height: 55rpx;
		text-align: center;
		color: #fff;
		font-size: 30rpx;
		border-radius: 30rpx;
		background-image: linear-gradient(to bottom, #f74a43, #ce160c);
		box-shadow: 0 6.66rpx 0 rgba(175, 7, 6, 1);
		margin: 0 auto;
		&.end{
			color: #eee;
			background-image: linear-gradient(to bottom, #b1b1b1, #535353);
			box-shadow: 0 6rpx 0 rgba(51, 51, 51, 1);
		}
	}
	.btn-reds{
		background:#ccc;
		box-shadow: 0 6rpx 0 #ddd;
	}
.btnpaly{
	position: fixed;
	bottom:0;
	left: 0;
	width: 100%;
	background: #e90111;
	height: 96rpx;
	line-height: 96rpx;
	text-align: center;
	font-size: 32rpx;
	z-index: 999;
	color: #fff;
}
			.sign-modal-box {
				width: 520rpx;
				background: #fff;
				border-radius: 20rpx;
				position: relative;
			
				.modal-head {
					height: 320rpx;
					align-items: center;
					justify-content: center;
					position: relative;
					.modal-bg {
						width: 100%;
						height: 100%;
					}
					.sign-tag {
						width: 70rpx;
						height: 70rpx;
						position: absolute;
						top: 50rpx;
						left: 50%;
						transform: translateX(-50%);
					}
					.sign-num-box {
						font-size: 30rpx;
						color: #fff;
						position: absolute;
						top: 150rpx;
						left: 50%;
						transform: translateX(-50%);
						.sign-num {
							font-size: 36rpx;
							font-weight: 600;
							padding: 0 10rpx;
						}
					}
				}
				.modal-content {
					padding: 30rpx 0;
					.sign-success {
						font-size: 34rpx;
						
						font-weight: bold;
						color: rgba(227, 173, 91, 1);
					}
					.sign-score {
						font-size: 26rpx;
						
						font-weight: 500;
						color: rgba(153, 153, 153, 1);
						padding-top: 16rpx;
					}
				}
				.modal-bottom {
					padding-bottom: 47rpx;
					.confirem-btn {
						width: 300rpx;
						line-height: 70rpx;
						background: linear-gradient(90deg, rgba(233, 180, 97, 1), rgba(238, 204, 137, 1));
						border-radius: 35rpx;
						padding: 0;
						font-size: 28rpx;
						
						font-weight: 500;
						color: rgba(255, 255, 255, 0.9);
					}
				}
			}
</style>
